<template>
    <div>
        <form action="/">
            <van-search
                    v-model="value"
                    show-action
                    shape="round"
                    placeholder="请输入搜索关键词"
                    @cancel="onCancel"
                    @input="onInput"
            />
        </form>
        <div v-if="searchResultState">
            <img src="../../../public/img/暂无搜索结果.png" style="width: 100%;height: 100%">
            <span style="font-weight: bold;color: gray;font-size: 16px;margin-left: 35%">暂无搜索结果</span>
        </div>
        <van-card v-else
                  v-for="movie in movies" :key="movie.id"
                  style="height: 120px"
                  desc="描述信息"
                  title="商品标题">
            <img :src="movie.previewUrl" @click="goMovieDetailPage(movie.id)"
                 style="width: 80px;height: 100px"
                 slot="thumb">

            <van-row slot="title">
                <div v-if="movie.grade==0">
                    <van-col style="width: 40%">
                        <span style="font-size: 15px;font-weight: bold" v-html="movie.name"></span>
                    </van-col>
                    <van-col style="width: 60%">
                    <span style="margin-left:50%;font-size: 12px;color:#FEA722" >
                        <span style="font-size: 18px;color:#FEA722">{{movie.watchNumber}}</span>
                        人想看
                    </span>

                    </van-col>
                </div>

                <div v-else>
                    <van-col style="width: 80%">
                        <span style="font-size: 15px;font-weight: bold" v-html="movie.name"></span>
                    </van-col>
                    <van-col style="width: 20%">
                        <span style="font-size: 15px;font-weight: bold;color:#FEA722;align-content: center" >{{movie.grade+'分'}}</span>
                    </van-col>
                </div>


            </van-row>

            <van-row slot="desc" style="margin-top: 10px">
                <span style="font-size: 8px;color: gray">{{movie.movieTypes.toString().replaceAll(",","/")}}</span>
            </van-row>

            <van-row slot="desc" gutter="25" style="margin-top: 5px">
                <van-col span="17">
                    <div class="text-overflow">
                        <span style="font-size: 9px;color: gray">{{computedMovieActors(movie.movieActors)}}</span>
                    </div>
                </van-col>
                <van-col span="6">
                    <van-tag round type="warning" v-if="movie.grade==0">想看</van-tag>
                    <van-tag round type="danger" v-else>购票</van-tag>
                </van-col>
            </van-row>

            <van-row slot="desc" style="margin-top: 5px">
                <span style="font-size: 8px;color: gray">{{movie.releaseDate.toString().substring(0,16).replace("T"," ")+'中国大陆上映'}}</span>
            </van-row>
        </van-card>


    </div>
</template>

<script>
    // import MovieSearch from "../../components/home/MovieSearch";
    import homeApi from "../../api/home";
    import {Toast} from 'vant';

    export default {
        name: "Search",
        data() {
            return {
                value: '',
                searchResultState: false,
                movies: [],
            };
        },
        components: {
            // MovieSearch
        },

        methods: {
            goMovieDetailPage(movieId) {
                this.$router.push("/movieDetail/" + movieId)
            },
            computedMovieActors(movieActors) {
                console.log(movieActors)
                let actorsMain = movieActors.filter(actors => {
                    return actors.portray == null;
                }).map(actors => {
                    return actors.name
                })

                let actor = movieActors.filter(actors => {
                    return actors.portray != null;
                }).map(actors => {
                    return actors.name
                })

                let str1 = actorsMain.toString().replaceAll(",", " ")
                let str2 = actor.toString().replaceAll(",", " ")
                return str1 + " | " + str2
            },
            onCancel() {
                this.$router.go(-1)
            },
            onInput() {   //搜索
                if (this.value==""){
                    return
                }
                this.timer = setTimeout(() => {
                    homeApi.movieSearchByName(this.value).then(response => {
                        this.movies = response.data
                        if (this.movies.length == 0) {
                            this.searchResultState = true
                        } else {
                            this.searchResultState = false
                        }
                        console.log(response.data);
                    }).catch(error => {
                        Toast.fail(error.data.message)
                    })
                }, 800)
            }
        },

    }
</script>

<style scoped>
    .text-overflow {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>